@import './variables.scss';

// 工具类名统一前缀
$prefix: e;

// 文字相关
.#{$prefix}-text-center {
  text-align: center;
}

// 浮动相关
.#{$prefix}-fl {
  float: left;
}

.#{$prefix}-fr {
  float: right;
}

.#{$prefix}-clearfix:before,
.#{$prefix}-clearfix:after {
  display: table;
  content: "";
}

.#{$prefix}-clearfix:after {
  clear: both
}

// 边距相关
$sizes: (0, 3, 5, 10, 15, 20, 25, 30);

@for $index from 1 to 9 {
  .#{$prefix}-m-#{nth($sizes, $index)} {
    margin: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-mt-#{nth($sizes, $index)} {
    margin-top: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-mr-#{nth($sizes, $index)} {
    margin-right: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-mb-#{nth($sizes, $index)} {
    margin-bottom: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-ml-#{nth($sizes, $index)} {
    margin-left: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-p-#{nth($sizes, $index)} {
    padding: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-pt-#{nth($sizes, $index)} {
    padding-top: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-pr-#{nth($sizes, $index)} {
    padding-right: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-pb-#{nth($sizes, $index)} {
    padding-bottom: #{nth($sizes, $index)}px !important;
  }

  .#{$prefix}-pl-#{nth($sizes, $index)} {
    padding-left: #{nth($sizes, $index)}px !important;
  }
}

// 快速使用
.#{$prefix}-m {
  margin: 20px !important;
}

.#{$prefix}-mt {
  margin-top: 20px !important;
}

.#{$prefix}-mr {
  margin-right: 20px !important;
}

.#{$prefix}-mb {
  margin-bottom: 20px !important;
}

.#{$prefix}-ml {
  margin-left: 20px !important;
}

.#{$prefix}-p {
  padding: 20px !important;
}

.#{$prefix}-pt {
  padding-top: 20px !important;
}

.#{$prefix}-pr {
  padding-right: 20px !important;
}

.#{$prefix}-pb {
  padding-bottom: 20px !important;
}

.#{$prefix}-pl {
  padding-left: 20px !important;
}

// 字体大小
$fontSizes: 12,
14,
16,
18,
20,
22,
24,
28,
32,
34,
36,
42;

@each $s in $fontSizes {
  .#{$prefix}-f-#{$s} {
    font-size: #{$s}px !important;
  }
}

// 文字颜色
.#{$prefix}-color-theme {
  color: $color-theme;
}

.#{$prefix}-color-theme-l {
  color: #02CED2;
}

.#{$prefix}-color-primary {
  color: $color-primary;
}

.#{$prefix}-color-success {
  color: $color-success;
}

.#{$prefix}-color-warning {
  color: $color-warning;
}

.#{$prefix}-color-error,
.#{$prefix}-color-danger {
  color: $color-danger;
}

.#{$prefix}-color-white {
  color: #fff;
}

.#{$prefix}-color-link {
  color: #00B4FF;
}

.#{$prefix}-color-label {
  color: #72A6AC;
}

.#{$prefix}-color-white3 {
  color: rgba(255, 255, 255, .3);
}

.#{$prefix}-color-white5 {
  color: rgba(255, 255, 255, .3);
}

.#{$prefix}-color-333 {
  color: #333;
}

.#{$prefix}-color-666 {
  color: #666;
}

.#{$prefix}-color-999 {
  color: #999;
}

.#{$prefix}-color-red {
  color: red;
}

.#{$prefix}-color-holder {
  color: #c9cacd;
}

// 背景色 渐变
.e-gradient-warning {
  background-image: linear-gradient(270deg, #FFD342 0%, #F9BD5F 100%);
}

.e-gradient-danger {
  background-image: linear-gradient(270deg, #FF8383 0%, #F74C4C 100%);
}

.e-gradient-success {
  background-image: linear-gradient(270deg, #5CE8A3 0%, #59D99A 100%);
}

// 背景色 无透明
.e-bgr {
  background: #F0F2F5;
}

.e-bg-white {
  background: #fff;
}

.e-bg-primary {
  background: $color-primary !important;
}

.e-bg-success {
  background: $color-success !important;
}

.e-bg-warning {
  background: $color-warning !important;
}

.e-bg-danger {
  background: $color-danger !important;
}

// 边框
.e-bd-b2 {
  border-bottom-width: 2px;
  border-bottom-style: solid;
}

.e-bd-white {
  border-color: #fff;
}

.e-bd-theme {
  border-color: $color-theme;
}

.e-bd-primary {
  border-color: $color-primary;
}

// 圆角
.e-radius {
  border-radius: 6px;
}

// 定位
.e-fixed {
  position: fixed !important;
}

.e-fixed-b {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}

.e-relative {
  position: relative;
}

.e-pointer {
  cursor: pointer;
}

.ellipse,
.ell {
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}

.ell2 {
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.e-bold {
  font-weight: 500;
}

.e-bolder {
  font-weight: 600;
}

.e-decoration {
  text-decoration: underline;
}

.e-pt-51 {
  padding-top: 51px;
}

.e-form-item {
  padding: 15px 5px 15px 5px;
  border-bottom: 1px solid #E1E1E1;

  .van-icon {
    color: rgba(52, 52, 52, 0.8);
    font-size: 18px;
  }

  .van-field {
    padding: 0;

    &__control {
      text-align: right;
      font-size: 14px;
    }
  }

  .van-cell::after {
    border: none;
  }
}

.van-button--theme {
  color: #fff;
  background-color: #3B6FC4;
  border: 1px solid #3B6FC4;
}

.e-dialog {
  overflow: visible !important;

  &-title {
    margin: 0 20px;
    padding: 0 0 20px;
  }

  &-close {
    position: relative;
    bottom: -50px;
  }

  .van-dialog__content {
    overflow: visible;
  }
}

.e-nav-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 0 0 10px;
  z-index: 9;

  &__title {
    padding: 0 15px;
  }

  &__back {
    padding: 10px;
  }
}

.e-tabs {
  &-item {
    margin-left: 20px;
    height: 26px;
    line-height: 26px;
    border-bottom: 2px solid transparent;
    font-size: 15px;
    color: #999;

    &:first-child {
      margin-left: 0;
    }

    &.is-active {
      border-color: #333;
      color: #333;
      font-size: 17px;
    }
  }
}

.e-search {
  .van-search__content {
    border: 1px solid #d0d0d0;
    border-radius: 4px;
    background: #fff;
  }
}
